<template>
	<view class="main">
		<view
			class="minus"
			:class="{ 'minus-show': props.value > 0 }"
			@click="HMinus"
		>
			<tm-icon
				:font-size="24"
				name="tmicon-minus"
				:color="props.color"
			></tm-icon>
		</view>
		<!-- <input
			class="count"
			:class="{ 'count-show': props.value > 0 }"
			type="number"
			:value="props.value"
			@blur="HBlur"
		/> -->
		<view
			class="box"
			:class="{
				'box-show': props.value > 0
			}"
		>
			<text class="count">
				{{ props.value }}
			</text>
		</view>
		<view
			class="add"
			:class="{
				'add-max': props.value >= props.max
			}"
			@click="HAdd"
		>
			<tm-icon :font-size="24" name="tmicon-plus" color="white"></tm-icon>
		</view>
	</view>
</template>

<script lang="ts" setup>
const emits = defineEmits(['change']);
const props = defineProps({
	value: {
		type: Number,
		default: 0
	},
	max: {
		type: Number,
		default: 9
	},
	color: {
		type: String,
		default: '#f83b40'
	}
});

function HMinus() {
	emits('change', props.value - 1);
}

function HAdd() {
	if (props.value + 1 > props.max) return;
	emits('change', props.value + 1);
}

function HBlur(e) {
	emits('change', uni.$tm.u.isNumber(e.detail.value, 0));
}
</script>

<style scoped>
.main {
	position: relative;
	display: flex;
	justify-content: flex-end;
}

.minus {
	position: relative;
	z-index: 1;
	width: 42rpx;
	height: 42rpx;
	border-radius: 42rpx;
	border: 1rpx solid v-bind(props.color);
	margin-right: -60rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	transform: rotate(90deg);
	transition: transform 0.2s;
	transition: margin 0.2s;
}

.minus-show {
	margin-right: 0;
	transform: rotate(0deg);
}

.box {
	margin: 0 8rpx;
	width: 0;
	height: 46rpx;
	border-radius: 23rpx;
	border: 1rpx solid #ababab;
	display: flex;
	justify-content: center;
	align-items: center;
	opacity: 0;
	transition: width 0.2s opacity 0.2s;
}

.box-show {
	width: 72rpx;
	opacity: 1;
}

.count {
	color: #464646;
}

.add {
	position: relative;
	z-index: 2;
	width: 42rpx;
	height: 42rpx;
	border-radius: 42rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: v-bind(props.color);
}

.add-max {
	opacity: 0.5;
}
</style>
